<template>
	<view class="chooseGift_box">
		<view class="list_box flex" v-for="(item,index) in specList.values" :key="index">
			<view class="left_goods_img">
				<image class="w100 h100" :src="item.image" mode=""></image>
			</view>
			<view class="right_goods_detail">
				<view class="goods_name s30 family f500">
					{{item.value}}
				</view>
				<view class="goods_price s36 family f500">
					<text class="s26">￥</text>{{item.price}}
				</view>
				<view class="goods_calculator flexjus">
					<view class="left_box_jia txtali s40" @click="jian(index)">
						-
					</view>
					<view class="content_box_number txtali h100">
						{{item.number}}
					</view>
					<view class="left_box_jia txtali s40" @click="jia(index)">
						+
					</view>
				</view>
			</view>
		</view>
		<view class="bot_btn txtali s36 family f500" @click="submit">
			确认
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				specList: {},
				orderId: 0
			}
		},
		onLoad(options) {
			this.orderId = options.orderId
			this.specList = this.$store.state.editGive
		},
		methods: {
			jia(index) {
				this.$store.state.editGive.values[index].number++
			},
			jian(index) {
				if(this.$store.state.editGive.values[index].number == 0) {
					uni.showToast({
						title: "我是有底线的!",
						icon: 'none'
					})
				} else {
					this.$store.state.editGive.values[index].number--
				}
			},
			submit() {
				let data = {
					id: this.orderId,
					spec: []
				}
				this.specList.values.forEach(item => {
					data.spec.push({
						id: item.id,
						number: item.number
					})
				})
				this.$request({
					url: 'manage/give',
					method: 'POST',
					data: data
				}).then(res => {
					if(res.data.code == 1) {
						uni.showToast({
							title: '修改成功',
							icon: 'none'
						})
					}
					setTimeout(() => {
						uni.navigateBack({
							delta: 2
						})
					},2001)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.chooseGift_box {
		overflow: hidden;

		.list_box {
			width: 686upx;
			height: 244upx;
			background: #FFFFFF;
			border-radius: 12upx;
			box-sizing: border-box;
			padding: 28upx 0 28upx 28upx;
			margin: 32upx auto;

			.left_goods_img {
				width: 188upx;
				height: 188upx;
				border-radius: 8upx;
			}

			.right_goods_detail {
				margin-left: 20upx;

				.goods_name {
					width: 350rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					color: #000000;
				}

				.goods_price {
					color: #FF3F4A;
					margin-top: 32upx;
				}
				.goods_calculator {
					width: 150upx;
					height: 36upx;
					border: 2upx solid #EBBE87;
					margin-top: 28upx;
					.left_box_jia {
						width: 36upx;
						height: 36upx;
						background: #EBBE87;
						line-height: 36upx;
						color: #FFFFFF;
					}
					.content_box_number {
						width: 78upx;
						line-height: 36upx;
					}
				}
			}
		}
		.bot_btn {
			width: 568upx;
			height: 80upx;
			background: #EBBE87;
			border-radius: 40upx;
			border: 2Upx solid #EBBE87;
			line-height: 80upx;
			position: fixed;
			bottom: 84upx;
			left: 86upx;
			color: #FFFFFF;
		}
	}
</style>
<style>
	page {
		background-color: #FDF9F3;
	}
</style>
